<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>任务列表</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			body{
				margin: 0;
				padding: 0;
				background-color: whitesmoke;
			}
			.title{
				font-size: 105px;
				font-weight: bolder;
				font-family: courier;
				color: firebrick;
				text-align: center;
				margin: 5px auto;
			}
			#app{
				width: 90%;
				margin: 0 auto;
				background-color: white;
			}
			.todoinput{
				width: 100%;
				padding: 30px;
				font-size: 30px;
				box-sizing: border-box;
				border: none;
				border-bottom: 0.2px solid #F5F5F5;
				outline: none;
			}
			.todolist{
				width: 100%;
				padding: 0;
				margin: 0;
			}
			.todolist> li{
				display: flex;
				position: relative;
				justify-content: flex-start;
				align-items: center;
				list-style: none;
				padding: 25px;
				padding-top: 20px;
				padding-bottom: 20px;
				font-size: 28px;
				border-bottom: 0.2px solid #F5F5F5;
			}
			.todolist> li >img{
				width: 25px;
				height: 25px;
				margin-right: 10px;
				/* float: left; */
			}
			.todolist> li .delete{
				position: absolute;
				top: 10.5px;
				right: 9px;
				cursor: pointer;
				font-size: 30px;
				color: lightgray;
			}
			.complete{
				color: grey;
				text-decoration: line-through;
			}
			#detail{
				padding: 10px;
				margin: 0 auto;
				box-sizing: border-box;
				font-size: 23px;
				color: gray;
				background-color: white;
			}
			#detail label{
				margin-left: 10px;
				cursor: pointer;
			}
			#detail label:hover{
				color: #B22222;
			}
			#detail label:nth-child(1){
				float: left;
			}
			#detail label:nth-child(2){
				margin-left: 30%;
			}
			#detail label:nth-child(5){
				float: right;
			}
			#detail .checked{
				color: #B22222;
			}
		</style>
	</head>
	<body>
		<!--  -->
		<p class="title">todolist</p>
		<div id="app">
			<input class="todoinput" placeholder="请输入事务(敲回车添加)" v-model="todo" @keyup.enter="insertTodo()" />
			<ul class="todolist">
				<li v-for="(item,index) in getdata" @click="changeState(item)">
					<img :src="[item.state ? './check.png' : './uncheck.png']" v-if="type==0" />
					<span :class="{'complete' : item.state&&type=='0'}" style="cursor: default;">{{item.title}}</span>
					<span class="delete" @click.stop="removeTodo(index)">×</span>
				</li>
			</ul>
			<div id="detail">
				<label>共{{getCount}}条</label>
				<label @click="getfilter('0')" :class="{checked : type==0}">全部</label>
				<label @click="getfilter('1')" :class="{checked : type==1}">已完成</label>
				<label @click="getfilter('2')" :class="{checked : type==2}">进行中</label>
				<label @click="clearFilled()">清空已完成数据</label>
			</div>
		</div>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					todolist: [{
							title: '敲代码',
							state: false,
						},
						{
							title: '调bug',
							state: true,
						}
					],
					todo: '',
					type: '0',
				},
				methods: {
					changeState(item) {
						if (this.type == '0') {
							item.state = !item.state
						}
					},
					getfilter(type) {
						this.type = type
					},
					clearFilled() {
						return this.todolist = this.todolist.filter(item => !item.state)
					},
					checkOut() {
						for (let op of this.todolist) {
							if (this.todo == "") {
								return false
							}
							if (op.title == this.todo) {
								alert("列表中已经存在该任务")
								return false
							}
						}
						return true
					},
					insertTodo() {
						let option = {
							title: '',
							state: false
						}
						if (this.checkOut()) {
							option.title = this.todo
							this.todolist.push(option)
							this.todo = ""
						}
					},
					removeTodo(index) {
						this.todolist.splice(index, 1)
					}
				},
				computed: {
					getCount() {
						switch (this.type) {
							case '0':
								return this.todolist.length
								break;
							case '1':
								return this.todolist.filter(item => item.state).length
								break;
							case '2':
								return this.todolist.filter(item => !item.state).length
								break;
						}
					},
					getdata() {
						switch (this.type) {
							case '0':
								return this.todolist
								break;
							case '1':
								return this.todolist.filter(item => item.state)
								break;
							case '2':
								return this.todolist.filter(item => !item.state)
								break;
						}
					}
				},
			})
		</script>
	</body>
</html>
